<template>
    <div class="chart-wrapper" v-loading="loading">
        <BaseChart v-if="chartOption" ref="baseChartRef" height="100%" width="100%" :options="chartOption" />
    </div>
</template>

<script setup>
import { ref, watch, shallowRef, watchEffect } from 'vue'
import { useReportStore } from '@/stores/report'
import { useI18n } from 'vue-i18n'
import BaseChart from '@/components/chart/BaseChart.vue'
import { formatDate } from '@/utils/date'
import { useMeterStore } from '@/stores/meter'
import { useCompanyStore } from '@/stores/company'
const loading = ref(false)
const { t } = useI18n()
const reportStore = useReportStore()
const companyStore = useCompanyStore()
const baseChartRef = ref(null)

let props = defineProps({
    chartType: {
        type: String,
        default: 'bar'
    },
    meterType: {
        type: String,
        default: null
    }
})

const formatChartData = (data) => {
    if (!props.meterType) {
        data = data.data
    }
    if (!data.length) return []
    return data.map(item => ({
        time: formatDate(item.start_time, 'HH:mm'),
        value: Number(item.Value || 0).toFixed(2)
    }))
}

const chartOption = shallowRef({})

async function renderChart() {
    loading.value = true
    const currentData = ref(null)
    const previousData = ref(null)
    if (props.meterType) {
        useMeterStore().setCurrentMeter(null)
        let resArr = await Promise.all([
            reportStore.fetchReportData('daily', false, { isAddStore: false, type: props.meterType }),
            reportStore.fetchReportData('daily', true, { isAddStore: false, type: props.meterType })
        ])
        currentData.value = resArr[0]
        previousData.value = resArr[1]
    } else {
        currentData.value = reportStore.getReportDataList('daily')
        previousData.value = reportStore.getReportDataList('daily', true)
    }
    setChartOption(currentData.value, previousData.value)
    loading.value = false
}

watch(() => reportStore.getReportDataList('daily'), renderChart)

watch([() => props.meterType, () => props.chartType, () => companyStore.currentCompany], renderChart, { immediate: true })

function setChartOption(currentData, previousData) {
    const formattedCurrentData = formatChartData(currentData)
    const formattedPreviousData = formatChartData(previousData)
    if (!formattedCurrentData.length && !formattedPreviousData.length) {
        chartOption.value = {}
        return
    }
    chartOption.value = {
        xAxisData: formattedCurrentData.map(item => item.time),
        series: [
            {
                name: t('date.label.dayBefore'),
                data: formattedPreviousData.map(item => item.value),
                type: props.chartType,
            },
            {
                name: t('date.label.yesterday'),
                data: formattedCurrentData.map(item => item.value),
                type: props.chartType,
            }
        ],
        customColors: ['#7dafff', '#409EFF'],
        showMarkLine: true,
        showZoom: true,
    }
}
</script>

<style scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
}

:deep(.echarts-wrapper) {
    flex: 1;
    min-height: 0;
}
</style>